import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Menu, Icon, Tooltip } from 'antd';
const SubMenu = Menu.SubMenu;
import { WeaTableNew } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { WeaErrorPage, WeaLeftRightLayout, WeaTop, WeaRightMenu, WeaRadioGroup, WeaReportCard, WeaEchart, WeaNewScroll, WeaSelect, WeaAlertPage, WeaTab } from "ecCom";
import * as cct from '../../constants/CommonConstant';
import * as rct from '../../constants/ReportConstant';
import "./style/index.css";

@inject('contractTypeStore')
@observer
class ContractTypeReport extends React.Component {

    constructor(props) {
        super(props);
    }

    // componentWillMount() {
    //     const params = {page:'getReportByType'};
    //     const store = this.props.reportStore;
    //     store.init(params);
    // }

    componentWillUpdate() {

    }

    componentDidUpdate() {
        // this.refs.chart.clear();
        if (this.refs.chart1) {
            this.refs.chart1.paint();
        }

        if (this.refs.chart2) {
            this.refs.chart2.paint();
        }
    }

    componentWillReceiveProps(nextProps){
        
        const flag = this.props.hasOwnProperty("location");
        if(flag){
            const keyOld = this.props.location.key;
            const keyNew = nextProps.location.key;
            if(keyOld!=keyNew){
                const store = this.props.contractTypeStore;
                store.reLoad();
            }
        }
    }

    render() {
        const store = this.props.contractTypeStore;

        let { tableStore, loading, years, contract_amount_targets, contract_amounts, contract_quantity_targets, contract_quantitys, names, tabKey, showList } = store;
        years = toJS(years);
        contract_amount_targets = toJS(contract_amount_targets);
        contract_amounts = toJS(contract_amounts);
        contract_quantity_targets = toJS(contract_quantity_targets);
        contract_quantitys = toJS(contract_quantitys);
        names = toJS(names);


        const config = [
            rct.year,
            rct.props
        ];

        const option1 = {
            color: rct.colors,
            title: {
                // text: '某地区蒸发量和降水量',
                // subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: years
            },
            toolbox: {
                show: false,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: names
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }

            ],
            series: [
                {
                    name: years[0],
                    type: 'bar',
                    data: contract_amounts,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },

                    barMaxWidth: '50px'
                },
                {
                    name: years[1],
                    type: 'bar',
                    data: contract_amount_targets,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },
                    barMaxWidth: '50px'
                }
            ]
        };

        const option2 = {
            color: rct.colors,
            title: {
                // text: '某地区蒸发量和降水量',
                // subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: years
            },
            toolbox: {
                show: false,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: names
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }

            ],
            series: [
                {
                    name: years[0],
                    type: 'bar',
                    data: contract_quantitys,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },

                    barMaxWidth: '50px'
                },
                {
                    name: years[1],
                    type: 'bar',
                    data: contract_quantity_targets,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },
                    barMaxWidth: '50px'
                }
            ]
        };


        let topTab = [
            {
                title: "按金额统计",
                viewcondition: 1
            },
            {
                title: "按数量统计",
                viewcondition: 2
            }
        ]
        return (
            <WeaRightMenu>
                <WeaTop
                    loading={loading}
                    title={"合同类型"}
                    icon={<i className={cct.icon} />}
                    iconBgcolor={cct.iconBgcolor}
                    showDropIcon={true}
                    dropMenuDatas={[]}
                    buttons={[<span className="wea-contract-showlist">
                        <Tooltip title={`${showList?'隐藏列表':'显示列表'}`}>
                            <span className={`icon ${showList?'cur':''}`} onClick={this.changeShowList.bind(this, showList)}>
                                <i className={`icon-coms-List`} />
                            </span>
                        </Tooltip>
                    </span>
                    ]}
                    buttonSpace={10}
                >
                    <div className="wea-contract-report">
                        <div className="content">
                            <WeaNewScroll height='100%' toTop={true}>
                                <div className="scroll-content">
                                    <div style={{ paddingTop: "10px" }}>
                                        <WeaRadioGroup config={config} onChange={(params) => { store.doSearch(params) }} />
                                        {/* <span>
                                            <WeaSelect
                                                options={[{key: "1",showname: "今年",selected: true},{key: "2",showname: "去年"}]}
                                                onChange={(v, showname) => {
                                                    // this.setState({value : v});
                                                    console.log('showname:', showname)
                                                }}
                                                style={{ width: 240 }}
                                            />
                                        </span>
                                        <span style={{paddingLeft:"10px"}}>
                                            <WeaSelect
                                                options={[{key: "1",showname: "收入合同",selected: true},{key: "2",showname: "支出合同"}]}
                                                onChange={(v, showname) => {
                                                    // this.setState({value : v});
                                                    console.log('showname:', showname)
                                                }}
                                                style={{ width: 240 }}
                                            />
                                        </span> */}
                                    </div>

                                    <div style={{ paddingTop: "10px" }}>
                                        <WeaTab
                                            datas={topTab}
                                            keyParam="viewcondition"  //主键
                                            countParam="groupid" //数量
                                            // type="card"
                                            selectedKey={tabKey}
                                            onChange={store.changeTab}

                                        />
                                        {/* <WeaReportCard
                                            title={""}
                                            onMoreClick={v => console.log('onMoreClick')}
                                            onDownloadClick={v => console.log('onDownloadClick')}
                                        > */}
                                            <div class="card-report" >
                                                {
                                                    tabKey == 1 &&
                                                    (contract_amount_targets.length > 0 || contract_amounts.length > 0 ?
                                                        <WeaEchart ref={"chart1"} option={option1} useDefault={false} /> :
                                                        <WeaAlertPage icon="icon-coms-blank">
                                                            <div>暂无数据</div>
                                                        </WeaAlertPage>
                                                    )
                                                }

                                                {
                                                    tabKey == 2 &&
                                                    (contract_quantity_targets.length > 0 || contract_quantitys.length > 0 ?
                                                        <WeaEchart ref={"chart2"} option={option2} useDefault={false} /> :
                                                        <WeaAlertPage icon="icon-coms-blank">
                                                            <div>暂无数据</div>
                                                        </WeaAlertPage>
                                                    )
                                                }
                                            </div>
                                        {/* </WeaReportCard> */}
                                    </div>
                                    {(
                                        showList&&
                                        <div style={{ paddingTop: "10px" }}>
                                            <WeaTable comsWeaTableStore={tableStore} getColumns={c => this.reRenderColumns(c)}/>
                                        </div>
                                    )}
                                </div>
                            </WeaNewScroll>
                        </div>
                    </div>
                </WeaTop>
            </WeaRightMenu>
        );
    }

    changeShowList = (bl, e) => {
        e.preventDefault();
        e.stopPropagation();
        const { changeShowList } = this.props.contractTypeStore;
        changeShowList(bl);
    }

    reRenderColumns(columns){
        let that = this;
        const store = that.props.contractTypeStore;
        columns.forEach(c=>{
            if(c.dataIndex=='contract_quantity_target'){
                c.render = function(text, record){
                    let counts = record.contract_quantity||0;
                    let precounts = record.contract_quantity_target||0;
                    let percent=0;
                    if(counts>0&&precounts==0) percent = 100;
                    else if(counts==0&&precounts>0) percent = -100;
                    else if(counts==0&&precounts==0) percent = 0;
                    else percent = (counts-precounts)/precounts*100;
                    percent = percent.toFixed(2);
                    if(percent>0){
                        return <span>{percent}%<div className={"rising-arrow-up"}><Icon type="arrow-up"/></div></span>
                    }else if(percent<0){
                        return <span>{percent}%<div className={"rising-arrow-down"}><Icon type="arrow-down"/></div></span>
                    }else{
                        return <span>{percent}%</span>
                    }
                }
            }else if(c.dataIndex=='contract_amount_target'){
                c.render = function(text, record){
                    let counts = record.contract_amount||0;
                    let precounts = record.contract_amount_target||0;
                    let percent=0;
                    if(counts>0&&precounts==0) percent = 100;
                    else if(counts==0&&precounts>0) percent = -100;
                    else if(counts==0&&precounts==0) percent = 0;
                    else percent = (counts-precounts)/precounts*100;
                    percent = percent.toFixed(2);
                    if(percent>0){
                        return <span>{percent}%<div className={"rising-arrow-up"}><Icon type="arrow-up"/></div></span>
                    }else if(percent<0){
                        return <span>{percent}%<div className={"rising-arrow-down"}><Icon type="arrow-down"/></div></span>
                    }else{
                        return <span>{percent}%</span>
                    }
                }
            } else {
                c.render = function(text, record){
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{__html: valueSpan}}></span>
                }
            }
        })
        return columns;
    }
}

export default ContractTypeReport;